/**
 * @Title: index.js
 * @Description: index 待完成任务
 * @author: Fanchao
 * @date: 2020/8/2 1:45 下午
 * @version V1.0
 */

import React, { useEffect } from 'react';
import { Table } from 'antd';
import styles from './index.less';
import SectionTitle from 'components/SectionTitle';
import { connect, Link } from 'umi';
import FilterByState from 'components/FilterByState';
import moment from 'moment';

const MyTask = ({ MyTask: { dataSource, examItemStatus }, dispatch, loading }) => {
    useEffect(() => {
        dispatch({
            type: 'MyTask/getDataSource',
            payload: {
                examItemStatus: '全部',
            },
        });
    }, []);
    const columns = [
        {
            title: '评定对象编号',
            align: 'left',
            render: (item) => item.evaluateObjectModel.evaluateObjectNo,
        },
        {
            title: '教员名称',
            align: 'left',
            render: (item) => item.evaluateObjectModel.teacherRealName,
        },
        {
            title: '课程',
            align: 'left',
            render: (item) => item.evaluateObjectModel.course,
        },
        {
            title: '开放时间',
            align: 'left',
            render: (item) => {
                return (
                    <div>
                        {moment(item.taskStartTime).format('YYYY-MM-DD hh:mm:ss')} - {moment(item.taskEndTime).format('YYYY-MM-DD hh:mm:ss')}
                    </div>
                );
            },
        },
        {
            title: '是否完成',
            dataIndex: 'examItemStatus',
            align: 'left',
        },
        {
            title: '操作',
            align: 'left',
            render(item) {
                return item.examItemStatus === '已完成' ? (
                    <Link to={`my-tasks/${item.evaluateExamItemId}`}>查看详情</Link>
                ) : (
                    <Link to={`my-tasks/${item.evaluateExamItemId}`}>立即评价</Link>
                );
            },
        },
    ];
    const onChange = (e) => {
        dispatch({
            type: 'MyTask/getDataSource',
            payload: {
                examItemStatus: e,
            },
        });
    };
    return (
        <div className={styles.pageContainer}>
            <div className={styles.pageContainerTable}>
                <SectionTitle title={'评价任务'}/>
                <div className={styles.tableContainer}>
                    <FilterByState onChange={onChange}/>
                    <Table
                        bordered={false} // 是否有边框
                        rowKey='evaluateExamItemId' // 唯一key值
                        loading={loading} // 加载动画
                        columns={columns} // 表头
                        dataSource={dataSource}
                        pagination={false}
                        rowClassName={(record, index) => {
                            const start = moment(record.taskStartTime).unix();
                            const end = moment(record.taskEndTime).unix();
                            const current = moment(new Date()).unix();
                            const colorBg = ((end - current) / (end - start)) * 100;
                            let className = '';
                            if (record.examItemStatus === '已完成') {
                                className = styles.defaultBg;
                            } else {
                                if (colorBg >= 0 && colorBg <= 30) {
                                    className = styles.bgRed;
                                }
                                if (colorBg > 30 && colorBg <= 50) {
                                    className = styles.bgYellow;
                                }
                                if (colorBg > 50) {
                                    className = styles.bgGreen;
                                }
                            }
                            return className;
                        }}
                    />
                </div>
            </div>
        </div>
    );
};
export default connect(({ MyTask, dispatch, loading }) => ({
    MyTask,
    dispatch,
    loading: loading.effects['MyTask/getDataSource'],
}))(MyTask);
